<template>
  <div class="view-watermark">
    <n-card style="height: 100%">
      <n-h2 prefix="bar">
        <n-text type="primary">水印示例</n-text>
      </n-h2>
      <n-space>
        <n-button @click="blind = false" :type="!blind ? 'success' : 'default'">
          明水印
        </n-button>
        <n-button @click="blind = true" :type="blind ? 'success' : 'default'">
          盲水印
        </n-button>
        <n-button
          @click="config.content = '水印示例'"
          :type="config.content === '水印示例' ? 'success' : 'default'"
        >
          默认文字：水印示例
        </n-button>
        <n-button
          @click="config.content = '啦啦啦啦啦'"
          :type="config.content === '啦啦啦啦啦' ? 'success' : 'default'"
        >
          更改文字：啦啦啦啦啦
        </n-button>
        <n-button
          @click="el = 'body'"
          :type="el === 'body' ? 'success' : 'default'"
        >
          全屏水印
        </n-button>
        <n-button
          @click="el = '.view-watermark'"
          :type="el === '.view-watermark' ? 'success' : 'default'"
        >
          区域水印
        </n-button>
        <n-button @click="modalProps.show = true">打开一个弹窗</n-button>
        <n-button @click="config.watermarkStyle = watermarkStyle1">
          样式1
        </n-button>
        <n-button @click="config.watermarkStyle = watermarkStyle2">
          样式2
        </n-button>
        <n-button @click="clear" type="success">移除水印</n-button>
      </n-space>
    </n-card>
    <pro-dialog
      v-model:modalProps="modalProps"
      :showButton="false"
    ></pro-dialog>
  </div>
</template>
<script lang="ts" setup name="watermark">
  import { useWatermark } from '@/hooks/useWatermark'
  const el = ref<string>('body')
  const watermarkStyle1 = {}

  const watermarkStyle2 = {
    width: 220,
    height: 160,
    fontSize: 18,
    color: 'blue',
    textAlign: 'left',
    textBaseline: 'middle'
  }

  const modalProps = ref({
    show: false
  })

  const blind = ref(false)

  const config = reactive({
    content: '水印示例',
    watermarkStyle: watermarkStyle1
  })

  let { setWatermark, clearWatermark } = useWatermark(el.value, blind.value)
  onMounted(() => {
    nextTick(() => {
      setWatermark(config.content, config.watermarkStyle)
    })
  })

  watch([el, blind], () => {
    clearWatermark()
    const watermark = useWatermark(el.value, blind.value)
    nextTick(() => {
      setWatermark = watermark.setWatermark
      clearWatermark = watermark.clearWatermark
      setWatermark(config.content, config.watermarkStyle)
    })
  })

  watch(config, (val) => {
    clearWatermark()
    nextTick(() => {
      setWatermark(val.content, config.watermarkStyle)
    })
  })

  const clear = () => {
    clearWatermark()
  }

  onBeforeUnmount(() => {
    clearWatermark()
  })
</script>
<style lang="less" scoped>
  .view-watermark {
    height: 98%;
  }
</style>
